<template>
  <view class="evaluate-box ">
    <view class="padding-tb-sm flex justify-between">
      <view class="flex">
        <view class="block-80">
          <fu-image radius="50%" :src="prop.head_img" mode="aspectFill" lazy-load></fu-image>
        </view>
        <view class="margin-left-sm flex flex-direction justify-between">
        <view class="text-df text-333">{{prop.user_nickname}}</view>
        <!-- 评价星 start -->
        <view>
          <!-- <block v-for="(item,index) in 5" :key="index">
            <image class="block-24" :src="index+1 <= prop.star ? require('./static/stard2.png'):require('./static/star2.png')"
              mode="aspectFill"></image>
          </block> -->
		 <view class="text-sm text-999"> {{prop.create_time}} </view>
		  
        </view>
        <!-- 评价星 end -->
      </view>
      </view>
      <!-- 评价时间 start -->
      <view class="text-sm text-999"><fu-star :readonly="false" :size="20" color="#FF9B26" :value="prop.star"></fu-star></view>
      <!-- 评价时间 end -->
    </view>
    
    <view class="padding-bottom-sm padding-top-sm text-df text-333 text-cut-english">{{prop.content}}</view>
    <view class="padding-top-xs padding-bottom-sm" >
      <view class="grid col-3">
        <block v-for="(ele,index) in prop.video" :key="index">
          <view class="padding-xs wrap-box" @tap="previewVideo(ele,index,'myVideo'+prop.id+index)">
            <view class="square-wrap">
              <view class="square-box">
                <image src="./static/video2.png" lazy-load mode="aspectFill"></image>
                <video :src="ele" class="video" style="display:none" :id='"myVideo"+prop.id+index' @fullscreenchange='fullscreenchange'></video>
              </view>
            </view>
          </view>
        </block>
        <block v-for="(ele,index) in prop.thumb" :key="index">
          <view class="padding-xs wrap-box" @tap="preview(ele,index)">
            <view class="square-wrap">
              <view class="square-box">
                <fu-image :src="ele" lazy-load mode="aspectFill"></fu-image>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
	<!-- <view class="merchant-wrap" v-if="prop.merchant_content">
		{{prop.merchant_content}}
		<text class="text-333 text-bold text-df">回复：</text><text class="text-666 text-df shop-evalue">{{prop.merchant_content}}</text>
	</view> -->
  </view>
</template>

<script>
/**
 * @author
 * @description 商品评价组件
 * @param {Object} type - 没有用到这个属性，暂定
 * @property {String} temp - 保存当前播放的是哪一个视频的id值+索引
 */
  export default {
    props: {
      prop:{
        type:Object,
        required:true,
      }
    },
    data() {
      return {
        temp:''
      }
    },
    methods: {
      /**
       * @event
       * @description 查看大图
       * @param {Object} item - 图片的信息
       * @param {Number} index - 当前图片的索引
      */
      preview(item, index) {
        uni.previewImage({
          current: index,
          urls: this.prop.thumb,
        });
      },
      /**
       * @event
       * @description 查看视频
       * @param {String} j - 视频路径
       * @param {Number} index - 是第几个视频
       * @param {String} el - 保存当前播放的是哪一个视频的id值+索引
       */
      previewVideo(j,index,el) {
        console.log(j,index,el)
         // 获取 video 上下文 videoContext 对象
          this.temp =el
          this.videoContext = uni.createVideoContext(el);
          // 进入全屏状态
          this.videoContext.requestFullScreen(0);
          setTimeout(function(){
            uni.createVideoContext(el).play(); //开始视频播放事件
          },500)
      },
      /**
       * @event
       * @description 退出全屏时视频暂停
       */
      fullscreenchange(){
        let temp = this.temp
        uni.createVideoContext(temp).pause(); //暂停视频播放事件
        uni.createVideoContext(temp).seek(0);
      }
    },
  }
</script>

<style lang="scss" scoped>
  .wrap-box {
    background-color: #FFFFFF;
    .square-wrap {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      box-sizing: border-box;
      position: relative;
      .square-box {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 8rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
      }
    }
  }
  .block-80 {
    width: 80rpx;
    height: 80rpx;
    min-width: 80rpx;
    min-height: 80rpx;
    background-color: #EEEEEE;
    border-radius: 50%;

    image {
      width: 100%;
      height: 100%;
    }
  }
  .block-56{
	  width: 56rpx;
	  height: 56rpx;
	  min-width: 56rpx;
	  min-height: 56rpx;
	  background-color: #EEEEEE;
	  border-radius: 50%;
	  
	  image {
	    width: 100%;
	    height: 100%;
	  }
  }

  .block-24 {
    width: 24rpx;
    height: 24rpx;
    min-width: 24rpx;
    min-height: 24rpx;
  }

  .text-333 {
    color: #333333;
  }

  .text-999 {
    color: #999999;
  }

  .text-cut-english {
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all;
  }

  /* 300*225 */
  .grid-video image {
    width: 150rpx;
    height: 112rpx;
  }
  .merchant-wrap{
	  background: #F8F8F8;
	  padding: 12rpx 24rpx;
	  line-height: 40rpx;
	  .shop-evalue{
		 word-break: break-all; 
	  }
  }
</style>
